<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="tabs flex-r j-c">
			<up-tabs :list="tabList" lineWidth="30" lineColor="#FED523" @click="handleTab"></up-tabs>
			<up-icon class="go-back" size="20" name="arrow-left" @click="goBack" />
		</view>
		<template v-if="false">
			<multiuser-guide :tabIndex="tabIndex" />
		</template>
		<view class="content mt-2 pl-2 pr-2" v-if="tabIndex===0">
			<view class="flex-r s-b a-c">
				<up-search v-model="searchKeyword" placeholder="搜索姓名" :showAction='false' shape="square"
					bgColor="#F9F9F9" height="40" />
				<text class="iconfont-color icon-shoucang ml-1"
					@click="handleTo('/pages/home/components/archivesManagement/addCombination?pageTitle=团队')" />
			</view>
			<view class="flex-r mt-2 filter">
				筛选项 <up-icon name="arrow-down" />
			</view>
			<view class="">
				<view class="archives-item flex-r a-c" @click="handleTo('/pages/home/components/personalMap/multiuser?pageTitle=西巢团队&type=团队')">
					<text class="iconfont-color icon-tuanduipenta" />
					<view class="ml-1">
						<text class="name">西巢团队（3人）</text>
						<view class="report">
							晓明，黄仁勋、刘老老
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content mt-2 pl-2 pr-2" v-else-if="tabIndex===1">
			<view class="flex-r s-b a-c">
				<up-search v-model="searchKeyword" placeholder="搜索姓名" :showAction='false' shape="square"
					bgColor="#F9F9F9" height="40" />
				<text class="iconfont-color icon-shoucang ml-1"
					@click="handleTo('/pages/home/components/archivesManagement/addCombination?pageTitle=家庭')" />
			</view>
			<view class="flex-r mt-2 filter">
				筛选项 <up-icon name="arrow-down" />
			</view>
			<view class="">
				<view class="archives-item flex-r a-c" @click="handleTo('/pages/home/components/personalMap/multiuser?pageTitle=小红家&type=家庭')">
					<text class="iconfont-color icon-jiatingpenta" />
					<view class="ml-1">
						<text class="name">小红家（3人）</text>
						<view class="report">
							晓明，黄仁勋、刘老老
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import multiuserGuide from "./components/multiuserGuide.vue"
	const safeAreaTop = uni.$safeArea?.safeAreaTop - 44;
	const tabList = reactive([{
			name: '团队'
		},
		{
			name: '家庭'
		}
	])
	const tabIndex = ref(0)
	const handleTab = (tab) => {
		tabIndex.value = tab.index
		console.log(tab);
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const searchKeyword = ref('')
	const handleTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	page {
		padding-top: 0;
	}

	.tabs {
		position: sticky;
		top: 0;

		.go-back {
			position: absolute;
			left: 20px;
			top: 16px;
		}
	}

	.content {
		.iconfont-color {
			font-size: 64rpx;
		}

		.filter {
			font-size: 24rpx;
			color: #4D4D4D;
		}

		.archives-item {
			padding: 30rpx 40rpx;
			box-shadow: 0px 1px 0px 0px #EEEEEE;

			.iconfont-color {
				font-size: 100rpx;
			}

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #0C0C0C;
			}

			.report {
				font-size: 24rpx;
				color: #797979;
				margin-top: 8rpx;
			}
		}
	}
</style>